<style type="text/css">
    *:focus {outline: none;}
    body{
        background:#edf1f3;
    }
    .head{
        width:100%;
        height:80px;
        background:#FFF;
    }
    .head_img{
        width:100px;
        float:left;
        margin:23px;
    }
    .head_p{
        padding-top:20px;
    }
    .head_p p{
        height:55px;
        line-height:55px;
        font-size:16px;
    }
    .content{
        position: relative;
        width:100%;
    }
    .content_left{
        position:absolute;
        left:0;
        top:80px;
        right:450px;
        text-align:center;
        z-index:4;
    }
    .content_img{
        height:428px;
        margin:auto;
        padding-top:68px;
    }
    .content_right {
        position: absolute;
        right: 150px;
        top: 130px;
        width: 350px;
        height: 427px;
        border:1px solid #a4a4a4;
        border-radius:4px;
        background:#FFF;
        z-index:5;
    }
    .c_r_head {
        width: 90%;
        margin: 54px 0 30px 0;
        text-align:center;
    }
    .c_r_head img{
        width:100px;
    }
    .c_r_head p{
        font-size:22px;
        letter-spacing:4px;
        padding-left:26px;
        padding-top:18px;
    }

    .c_r_content{
        width:278px;
        height:250px;
        margin:auto;
    }
    .c_r_content h3{
        color: #000;
        font-size: 16px;
        font-weight: normal;
    }
    .c_r_content input{
        font-size:14px;
        background:none;
    }
    .c_r_c_box{
        width:100%;
        margin:0;
    }
    .c_r_c_box .ma{
        width:125px;
        height:46px;
        float:left;
        text-align:center;
        margin-top:20px;
        margin-left:5px;
    }
    .c_r_c_button{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-top: 30px;
        background-color: #3896bb;
        cursor: pointer;
        float: left;
        font-size: 20px;
        border-radius: 4px;
        transition:.2s ease-in;
    }
    .c_r_c_button:hover{
        background-color: #38A8DE;
    }
    .c_r_c_button p{
        color:#FFF;
        margin:auto;
    }
    .box_name{
        width:100%;
        height:46px;
        margin-bottom: 20px;
        background: #e7ebec;
        border:1px solid #e7ebec;
        float: left;
        transition:.2s ease-in;
    }
    .focused{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);

    }
    .box_name_p{
        width:35px;
        float: left;
    }
    .box_name_p img{
        margin: 12px 0 0 12px;

    }
    .box_name_k{
        border: none;
        border-radius: 3px;
        padding: 0 5px;
        background: none;
        display: block;
        line-height: 38px;
        padding: 2px;
    }
    .box_name_y{
        width:100px;
        height:100%;
        border:none;
        border-radius:3px;
        padding:0 5px;
        background: none;
    }
    .tips
    {
        text-align:center;
        font-size:12px;
        color:#F00;
        width:100%;
        float:left;
        margin:12px 0;
    }
    #chart-background{
        position: relative;
        background: url(src/img/1-00.jpg);
        width: 575px;
        height: 428px;
        left: 25%;
        top: 68px;
    }
    #chart-container{
        position: absolute;
        top: 123px;
        height: 142px;
        width: 261px;
        left: 69px;
    }
    .choose-title {
        overflow:hidden;
        list-style:none;
        width:100%;
        border-bottom:1px solid #a4a4a4;
    }
    .choose-title li {
        float:left;
        height:50px;
        width:50%;
        text-align:center;
        cursor:pointer;
        line-height:50px;
        color:#aaaaaa;
        font-size:16px;
    }
    .choose-title .cur {
        color:#2f3030;
        border-bottom:1px solid #a4a4a4;
    }
    .box_name.focused label{
        color:rgb(33,150,243);
        -webkit-transform:translate3d(-40px,-65px,0) scale(.85);
        transform:translate3d(-40px,-65px,0) scale(.85)
    }
    /*用CSS3画的云们*/
    .cloud {
        width: 200px;
        height: 60px;
        background: #fff;
        border-radius: 200px;
        opacity:0;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        position: relative;
    }

    .cloud:before, .cloud:after {
        content: '';
        position: absolute;
        background: #fff;
        width: 100px;
        height: 80px;
        position: absolute;
        top: -15px;
        left: 10px;
        border-radius: 100px;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        -moz-transform: rotate(30deg);
    }

    .cloud:after {
        width: 120px;
        height: 120px;
        top: -55px;
        left: auto;
        right: 15px;
    }
    /*各种速度大小的云*/
    .x1 {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-animation: moveclouds 15s linear infinite;
        -moz-animation: moveclouds 15s linear infinite;
        -o-animation: moveclouds 15s linear infinite;
    }

    .x2 {
        left: 200px;
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 0.6;
        -webkit-animation: moveclouds 25s linear infinite;
        -moz-animation: moveclouds 25s linear infinite;
        -o-animation: moveclouds 25s linear infinite;
    }

    .x3 {
        left: -250px;
        top: -200px;
        -webkit-transform: scale(0.4);
        -moz-transform: scale(0.4);
        transform: scale(0.4);
        opacity: 0.8;
        -webkit-animation: moveclouds 20s linear infinite;
        -moz-animation: moveclouds 20s linear infinite;
        -o-animation: moveclouds 20s linear infinite;
    }

    .x4 {
        left: 470px;
        top: -250px;
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        transform: scale(0.75);
        opacity: 0.75;
        -webkit-animation: moveclouds 18s linear infinite;
        -moz-animation: moveclouds 18s linear infinite;
        -o-animation: moveclouds 18s linear infinite;
    }

    .x5 {
        left: -150px;
        top: -150px;
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0.8;
        -webkit-animation: moveclouds 20s linear infinite;
        -moz-animation: moveclouds 20s linear infinite;
        -o-animation: moveclouds 20s linear infinite;
    }
    @-webkit-keyframes moveclouds {
        0% {margin-left: 280px;opacity:1;}
        100% {margin-left: -400px;opacity:0;}
    }
    @-moz-keyframes moveclouds {
        0% {margin-left: 280px;opacity:1;}
        100% {margin-left: -400px;opacity:0;}
    }
    @-o-keyframes moveclouds {
        0% {margin-left: 280px;opacity:1;}
        100% {margin-left: -400px;opacity:0;}
    }
    .md-float label{
        color:rgb(33,150,243);
        -webkit-transform:translate3d(-40px,-65px,0) scale(.85);
        transform:translate3d(-40px,-65px,0) scale(.85)
    }
    #chart-background{
        position:relative;
    }
    #highcharts-0{
        border-radius:5px;
    }
    md-input-container {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 2px 2px 26px;
    }
    md-input-container label{
        order: 1;
        pointer-events: none;
        -webkit-font-smoothing: antialiased;
        padding-left: 2px;
        z-index: 1;
        color: rgba(0,0,0,0.26);
        -webkit-transform: translate3d(0,-32px,0) scale(1);
        transform: translate3d(0,-32px,0) scale(1);
        transition: -webkit-transform cubic-bezier(.25,.8,.25,1) .25s;
        transition: transform cubic-bezier(.25,.8,.25,1) .25s;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    .content_right .content .cur {
        display:block
    }
    .content_right .content>div {
        display:none;
        width:278px;
        margin:auto;
        padding-top:50px;
    }
    .content_right .ma{
        font-size:16px;
        text-align:center;
    }
    .content_right .ma img{
        max-width:218px;
        max-height:218px;
    }

</style>
<div class="head"><!--头开始-->
    <div>
        <img class="head_img"src="src/img/1-03.png"/>
    </div>
</div><!--头结束-->
<div class="content"><!--主内容开始-->
    <div class="content_left"><!--主内容左开始-->
        <figure id="chart-background">
            <div id="clouds">
                <div class="cloud x1"></div>
                <div class="cloud x2"></div>
                <div class="cloud x3"></div>
            </div>
            <div id="chart-container"></div>
        </figure>
    </div><!--主内容左结束-->
    <div class="content_right"><!--主内容右开始-->
        <ul class="choose-title">
            <li class="cur" data-gift="choose-gift-1">快速登录</li>
            <li data-gift="choose-gift-2">账号密码登录</li>
        </ul>
        <div class="content">
            <div id="choose-gift-1" class="cur">
                <div class="ma">
                    <p>请用 微信 扫一扫登录</p>
                    <img id="img" src="src/img/yuncang_ma.gif">
                    <p class="tips"></p>
                </div>
            </div>
            <div id="choose-gift-2">
                <div class="box_name" id="number"><!--登录名开始-->
                    <div class="box_name_p">
                        <img src="src/img/login_icon1.png" width="22" height="20">
                    </div>
                    <md-input-container>
                        <label for="use">用户名</label>
                        <input id="use" name="use" class="box_name_k" type="text" />
                    </md-input-container>
                </div><!--登录名结束-->
                <div class="box_name" id="password"><!--登录名开始-->
                    <div class="box_name_p">
                        <img src="src/img/login_icon2.png"  width="20" height="23">
                    </div>
                    <md-input-container>
                        <label for="pwd">密码</label>
                        <input id="pwd" name="pwd" class="box_name_k" type="password" />
                    </md-input-container>
                </div><!--登录名结束-->
                <div style="width:146px;" class="box_name" id="verification"><!--登录名开始-->
                    <div class="box_name_p">
                        <img src="src/img/login_icon3.png" width="18" height="24">
                    </div>
                    <md-input-container>
                        <label for="nzm">验证码</label>
                        <input id="nzm" name="nzm" class="box_name_k" type="text"/>
                    </md-input-container>
                </div><!--登录名结束-->
                <div class="ma"><img src="validcode2.aspx" style="float:right;height:40px;"/></div>
                <div id="login" class="c_r_c_button">
                    <p>登录</p>
                </div>
                <p class="tips"></p>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    var result=-3;
    var id="";
    var locat="";
    function login(){
        var args = {'lx':0};

        $('input').each(function(){
            if($(this).val().length == 0)
            {
                $(this).focus();
                return;
            }
            args[$(this).attr('name')] = $(this).val();
        });
        postJSON('ycfwdl.aspx',args,function(data){
            if(data.refcode)
            {
                $('.tips').text(data.refinfo);
            }
            else
            {
                window.location.href = window.location.href.replace('lb=1','lg=1');
            }
        });

    }
    function saoyisaologin(){
        result=-3;
        $.getJSON('ycwdloauth.aspx',{'lx':1,"id":id},function(data){
                    //alert(data.refcode); //返回值是-2
                    if(data.refcode==0){
                        //alert(data.refcode+"登陆");
                        locat=data.refinfo;
                        //alert(locat);
                        window.location.href =('fwpcindex.aspx');
                        result=0;
                    }
                    else if(data.refcode==-1){
                        $('#choose-gift-1 .tips').text(data.refinfo);
                    }
                    else{


                    }
                }
        )
    }
    function getErWeiMa(){
        result=-3;
        $.getJSON('ycwdloauth.aspx',{'lx':0},function(data){
                    if(data.refcode==0){
                        $('#img').attr('src',data.refinfo);//获取二维码图片
                        //alert(data.refinfo);
                        id=data.id;//获取id
                        //alert(data.id);
                        checkLogin();
                    }
                    else{
                        $('.tips').text(data.refinfo);
                    }
                }
        )
    }

    function checkLogin(){   //检查扫码登陆状态
        var int=setInterval("saoyisaologin()",5000);//每隔5秒钟调用一次
        if(result==0){
            window.clearInterval(int);
        }
    }
    $(document).ready(function() {
        $('#login').click(function(){
            login();
        });
        getErWeiMa();
        $(window).resize();
        $(document).keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                login();
            }
        });
        $(".box_name input").each(function(){
            if(!$(this).val().length>0){
                $(this).parent().parent(".box_name").addClass('md-float')
            }
        })
        $('#chart-container').highcharts({
            chart: {
                type: 'areaspline',
                backgroundColor:'#7CBAF3',
                spacingBottom: -10,
                spacingLeft: -195,
                spacingRight: -90,
                events: {
                    load: function() {

                        // 每秒给图表对象推送一组随机数据
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(), // 现在时间
                                    y = Math.random().toFixed(2)*100;
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            legend: {
                enabled:false
            },
            title:{
                style: {
                    display:'none'
                }
            },
            xAxis: {
                categories: [],
                labels:{
                    enabled:false
                }
            },
            yAxis: {
                gridLineWidth: 0,
                labels:{
                    enabled:false,
                    style: {
                        display:'none'
                    }
                },

            },
            tooltip: {
                shared: true,
                valueSuffix: ' units'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    fillColor:'#4373A3',
                    lineColor:'#386C9C',
                    marker: {
                        fillColor: '#FFFFFF',
                        symbol: 'square',
                        width:5,
                        height:5
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                            Highcharts.numberFormat(this.y, 2);
                }
            },
            series: [{
                name: 'XX扫码情况',
                data: (function() {
                    // 随机数据
                    var data = [],
                            time = (new Date()).getTime(),
                            i;

                    for (i = -10; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random().toFixed(2)*100
                        });
                    }
                    return data;
                })()
            }]
        });
    });
</script>
<script type="text/javascript">
    $('.choose-title li').click(function(){
        $(this).addClass('cur').siblings().removeClass('cur'); //切换选项卡标签的class
        $('#'+$(this).data('gift')).show().siblings().hide();//切换选项卡内容的显示/隐藏
    });
    $('.box_name input').bind('input propertychange',function(){
        if($(this).val().length>0){
            $(this).parent().parent('.box_name').addClass('md-float')
        }else{
            $(this).parent().parent('.box_name').removeClass('md-float')
        }
    })
    $('.box_name input').focus(function(){
        $(this).parent().parent('.box_name').addClass('focused')
    })
    $('.box_name input').blur(function(){
        $(this).parent().parent('.box_name').removeClass('focused')
    })
</script>
